Skip to content

Commit f73b91a

Browse files
szager-chromiumszager-chromium
authored
[css-animations-2][web-animations-2] s/animation-trigger-type/animation-trigger-behavior/ (#12223)
1 parent 446f179 commit f73b91a

File tree

2 files changed

+110
-102
lines changed

2 files changed

+110
-102
lines changed

‎css-animations-2/Overview.bs

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -723,14 +723,14 @@ Declaring Animation Triggers</h2>
723723
The 'animation-trigger' properties
724724
are [=reset-only sub-properties=] of the 'animation' [=shorthand=].
725725
726-
## The 'animation-trigger-type' property ## {#animation-trigger-type}
726+
## The 'animation-trigger-behavior' property ## {#animation-trigger-behavior}
727727
728-
The 'animation-trigger-type' property specifies the [=animation trigger type=]
728+
The 'animation-trigger-behavior' property specifies the [=animation trigger behavior=]
729729
of the [=animation trigger=].
730730
731731
<pre class='propdef'>
732-
Name: animation-trigger-type
733-
Value: <<single-animation-trigger-type>>#
732+
Name: animation-trigger-behavior
733+
Value: <<single-animation-trigger-behavior>>#
734734
Initial: once
735735
Applies to: all elements
736736
Inherited: no
@@ -740,12 +740,12 @@ Animation type: not animatable
740740
Canonical order: per grammar
741741
</pre>
742742
743-
<span class=prod><dfn>&lt;single-animation-trigger-type></dfn> = once | repeat | alternate | state</span>
743+
<span class=prod><dfn>&lt;single-animation-trigger-behavior></dfn> = once | repeat | alternate | state</span>
744744
745-
The values of 'animation-trigger-type' have the following meaning
745+
The values of 'animation-trigger-behavior' have the following meaning
746746
for an [=animation trigger=] that enters its [=animation trigger/active interval|active interval=]:
747747
748-
<dl dfn-type=value dfn-for=animation-trigger-type>
748+
<dl dfn-type=value dfn-for=animation-trigger-behavior>
749749
<dt><dfn>once</dfn>
750750
<dd>
751751
The animation is triggered and played once and only once.
@@ -767,7 +767,7 @@ for an [=animation trigger=] that enters its [=animation trigger/active interval
767767
When the trigger’s [=animation trigger/active interval=] is re-entered the animation is resumed.
768768
</dl>
769769
770-
The behavior of each value is defined in [[web-animations-2#trigger-types]].
770+
The behavior of each value is defined in [[web-animations-2#trigger-behaviors]].
771771
772772
## The 'animation-trigger-timeline' property ## {#animation-trigger-timeline}
773773
@@ -964,7 +964,7 @@ The values of 'animation-trigger-exit-range-start' have the following meaning:
964964
## The 'animation-trigger' property ## {#animation-trigger}
965965
966966
The 'animation-trigger' property is a [=shorthand property|shorthand=]
967-
that sets 'animation-trigger-type', 'animation-trigger-timeline',
967+
that sets 'animation-trigger-behavior', 'animation-trigger-timeline',
968968
'animation-trigger-range-start', 'animation-trigger-range-end',
969969
'animation-trigger-exit-range-start', and 'animation-trigger-exit-range-end'
970970
together in a single declaration,
@@ -983,7 +983,7 @@ Animation Type: not animatable
983983
</pre>
984984
985985
<pre class=prod>
986-
<dfn>&lt;single-animation-trigger></dfn> = <<single-animation-trigger-type>> || [ none | auto | [ [ <<dashed-ident>> | <<scroll()>> | <<view()>> ] [ normal | <<length-percentage>> | <<timeline-range-name>> <<length-percentage>>? ]{0,4} ] ]
986+
<dfn>&lt;single-animation-trigger></dfn> = <<single-animation-trigger-behavior>> || [ none | auto | [ [ <<dashed-ident>> | <<scroll()>> | <<view()>> ] [ normal | <<length-percentage>> | <<timeline-range-name>> <<length-percentage>>? ]{0,4} ] ]
987987
</pre>
988988
989989
# Animation Events # {#events}

‎web-animations-2/Overview.bs

Lines changed: 100 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -2372,76 +2372,93 @@ and are attached to an [=animation attachment range|attachment range=].
23722372

23732373
Issue: Should there be any effect of triggers on scroll-driven animations?
23742374

2375-
### Animation Trigger Types ### {#trigger-types}
2375+
### Animation Trigger Internal State ### {#trigger-state}
23762376

2377-
The behavior an [=animation trigger=] applies to its associated [=animation=]’s
2378-
playback is defined by its <dfn export>animation trigger type</dfn>, and
2379-
depending on its [=animation trigger state|state=] can apply one of two
2380-
distinct behavior types: [=animation trigger state/primary=] or [=animation trigger state/inverse=].
2381-
Given an internal |did trigger| flag, the values of [=animation trigger type=]
2382-
can be one of the following:
2377+
An [=animation trigger=] |trigger|
2378+
has an internal boolean <dfn export>did trigger</dfn> flag, which is initially false,
2379+
and an internal <dfn export lt="animation trigger state">state</dfn> with
2380+
these possible values:
23832381

2384-
<dl>
2385-
<dt>''animation-trigger-type/once''
2386-
<dd>
2387-
The [=animation trigger state/primary=] behavior is [=play an animation|triggering=] the associated animation.
2382+
<dl dfn-for="animation trigger state">
2383+
<dt><dfn>idle</dfn>
2384+
<dt><dfn>primary</dfn>
2385+
<dt><dfn>inverse</dfn>
2386+
</dl>
23882387

2389-
<dt>''animation-trigger-type/repeat''
2390-
<dd>
2391-
The [=animation trigger state/primary=] behavior is [=play an animation|triggering=] the associated animation.
2392-
The [=animation trigger state/inverse=] behavior is resetting the associated [=animation effect=] back to
2393-
its [=animation effect/before phase=] and its associated animation’s [=animation/start time=] to zero.
2388+
The values of [=animation trigger state|state=] and [=did trigger=] are
2389+
updated by the [=updating animation trigger state=] procedure, described below.
23942390

2395-
<dt>''animation-trigger-type/alternate''
2396-
<dd>
2397-
<dl class=switch>
2398-
: if the |did trigger| flag is false,
2399-
::
2400-
The [=animation trigger state/primary=] behavior is [=play an animation|triggering=] the associated animation.
2391+
Issue: Do we need a formal resolution on the spec of the idle state?
24012392

2402-
: Otherwise,
2403-
::
2404-
The [=animation trigger state/primary=] behavior is [=reverse an animation|reversing=] the associated animation.
2393+
### Animation Trigger Behavior ### {#trigger-behaviors}
24052394

2406-
</dl>
2395+
An [=animation trigger=] has an associated <dfn export>animation trigger behavior</dfn>
2396+
which, along with [=did trigger=] and [=animation trigger state|state=],
2397+
determines the [=animation trigger|trigger=]'s effect on its
2398+
associated [=animation=]'s playback.
24072399

2408-
The [=animation trigger state/inverse=] behavior is [=reverse an animation|reversing=] the associated animation.
2400+
The [=animation effect=] associated with an [=animation trigger=]
2401+
in the [=animation trigger state/idle=] state
2402+
remains in its [=animation effect/before phase=] and
2403+
stays at zero [=animation/current time=],
2404+
regardless of the trigger's [=did trigger=] flag or [=animation trigger state|state=].
2405+
Otherwise, the effect on playback is as follows for
2406+
given values of <var ignore=''>behavior</var>:
24092407

2410-
<dt>''animation-trigger-type/state''
2408+
<dl>
2409+
<dt>''animation-trigger-behavior/once''</dt>
24112410
<dd>
2412-
The [=animation trigger state/primary=] behavior is [=play an animation|triggering or resuming=] the associated animation.
2413-
The [=animation trigger state/inverse=] behavior is [=pause an animation|pausing=] the associated animation.
2414-
</dl>
2415-
2416-
Issue: Need to bike-shed the name for type "state" type.
2411+
<dl class=switch>
2412+
: If [=animation trigger state|state=] is [=animation trigger state/primary=],
2413+
:: the effect is to [=play an animation|trigger=] the associated animation.
24172414

2418-
Issue: Do we need a proper definition for "behavior types primary/inverse"?
2415+
: Otherwise,
2416+
:: the trigger has no effect.
2417+
</dl>
2418+
</dd>
24192419

2420-
### Animation Trigger State ### {#trigger-state}
2420+
<dt>''animation-trigger-behavior/repeat''</dt>
2421+
<dd>
2422+
<dl class=switch>
2423+
: If [=animation trigger state|state=] is [=animation trigger state/primary=],
2424+
:: the effect is to [=play an animation|trigger=] the associated animation.
24212425

2422-
An [=animation trigger=] |trigger| with [=animation trigger type=] |type|
2423-
and an associated [=animation=] |animation|
2424-
has an internal <dfn export lt="animation trigger state">state</dfn> which
2425-
controls the applied behavior type. This state has discrete values
2426-
which can be one of the following:
2426+
: If [=animation trigger state|state=] is [=animation trigger state/inverse=],
2427+
:: the effect is to reset the associated [=animation effect=] back to
2428+
its [=animation effect/before phase=] and its associated [=animation=]’s
2429+
[=animation/start time=] to zero.
2430+
</dl>
2431+
</dd>
24272432

2428-
<dl dfn-for="animation trigger state">
2429-
<dt><dfn>idle</dfn>
2433+
<dt>''animation-trigger-behavior/alternate''
24302434
<dd>
2431-
The [=animation effect=] associated |animation| remains in
2432-
its [=animation effect/before phase=] and stays at zero [=animation/current time=].
2435+
<dl class=switch>
2436+
: If [=animation trigger state|state=] is [=animation trigger state/primary=]
2437+
and [=did trigger=] is false,
2438+
:: the effect is to [=play an animation|trigger=] the associated animation.
24332439

2434-
<dt><dfn>primary</dfn>
2435-
<dd>
2436-
When switched to this value the [=animation trigger state/primary=] behavior type defined by |type| is applied to |animation|.
2440+
: If [=animation trigger state|state=] is [=animation trigger state/primary=]
2441+
and [=did trigger=] is true,
2442+
:: the effect is to [=reverse an animation|reverse=] the associated animation.
24372443

2438-
<dt><dfn>inverse</dfn>
2444+
: If [=animation trigger state|state=] is [=animation trigger state/inverse=]
2445+
:: the effect is to [=reverse an animation|reverse=] the associated animation.
2446+
</dl>
2447+
</dd>
2448+
2449+
<dt>''animation-trigger-behavior/state''
24392450
<dd>
2440-
When switched to this value the [=animation trigger state/inverse=] behavior type defined by |type| is applied to |animation|.
2451+
<dl class=switch>
2452+
: If [=animation trigger state|state=] is [=animation trigger state/primary=]
2453+
:: the effect is to [=play an animation|trigger or resume=] the associated animation.
24412454

2455+
: If [=animation trigger state|state=] is [=animation trigger state/inverse=]
2456+
:: the effect is to [=pause an animation|pause=] the associated animation.
2457+
</dl>
2458+
</dd>
24422459
</dl>
24432460

2444-
Issue: Do we need a formal resolution on the spec of the idle state?
2461+
Issue: Do we need a proper definition for "behavior types primary/inverse"?
24452462

24462463
### Animation Trigger Active Interval ### {#trigger-active-interval}
24472464

@@ -2493,29 +2510,26 @@ Depending on its most recent [=animation trigger state|state=] |state|, the
24932510
The procedure of <dfn>setting timeline of animation trigger</dfn> |trigger|,
24942511
to |new timeline| which may be <code>null</code>, is as follows:
24952512

2496-
1. Let |old timeline| be the current [=timeline=] of |trigger|, if any.
2513+
1. Let |old timeline| be the current value of |trigger|.{{AnimationTrigger/timeline}}, if any.
24972514

24982515
1. If |new timeline| is the same object as |old timeline|, abort this procedure.
24992516

2500-
1. Let the [=timeline=] of |trigger| be |new timeline|.
2517+
1. Set |trigger|.{{AnimationTrigger/timeline}} to |new timeline|.
25012518

2502-
1. Run the procedure to [=updating animation trigger state=] for |trigger|.
2519+
1. Run the [=updating animation trigger state=] procedure for |trigger|.
25032520
</div>
25042521

25052522
### Updating Animation Trigger State ### {#updating-trigger-state}
25062523

25072524
<div algorithm="updating animation trigger state">
2508-
The procedure of <dfn>updating animation trigger state</dfn> |state|
2509-
of an [=animation trigger=] |trigger|,
2510-
with a given a flag |did trigger|, and an [=animation trigger type=] |type|,
2511-
is as follows:
2525+
The procedure of <dfn>updating animation trigger state</dfn>
2526+
of an [=animation trigger=] |trigger| is as follows:
25122527

2513-
1. Let |did trigger| be a boolean flag that is initially false.
2528+
1. Let |did trigger| be the current value of |trigger|'s [=did trigger=] flag.
25142529

2515-
1. Let |state| be the current [=animation trigger state|state=]
2516-
of |trigger| that is initially [=animation trigger state/idle=].
2530+
1. Let |behavior| be |trigger|'s associated [=animation trigger behavior=].
25172531

2518-
1. Set |state| as follows:
2532+
1. Set |trigger|.[=animation trigger state|state=] as follows:
25192533
<dl class=switch>
25202534
: If |trigger|’s [=local time=] is [=unresolved=],
25212535
::
@@ -2525,7 +2539,7 @@ Depending on its most recent [=animation trigger state|state=] |state|, the
25252539
::
25262540

25272541
<dl class=switch>
2528-
: If |type| is ''animation-trigger-type/once'' and |did trigger| flag is true,
2542+
: If |behavior| is ''animation-trigger-behavior/once'' and |did trigger| is true,
25292543
::
25302544
Then abort this procedure.
25312545

@@ -2535,16 +2549,16 @@ Depending on its most recent [=animation trigger state|state=] |state|, the
25352549
<dl class=switch>
25362550
: If |trigger| is inside its [=animation trigger/active interval|active interval=],
25372551
::
2538-
1. Set |state| to [=animation trigger state/primary=].
2539-
1. Set |did trigger| to true.
2552+
1. Set |trigger|.[=animation trigger state|state=] to [=animation trigger state/primary=].
2553+
1. Set |trigger|.[=did trigger=] to true.
25402554

25412555
: Otherwise,
25422556
::
25432557

25442558
<dl class=switch>
2545-
: If |did trigger| flag is true,
2559+
: If |did trigger| is true,
25462560
::
2547-
Set |state| to [=animation trigger state/inverse=].
2561+
Set |trigger|.[=animation trigger state|state=] to [=animation trigger state/inverse=].
25482562

25492563
</dl>
25502564

@@ -3609,7 +3623,7 @@ Update the type for the AnimationPlaybackEventInit members.
36093623
interface AnimationTrigger {
36103624
constructor(optional AnimationTriggerOptions options = {});
36113625
attribute AnimationTimeline timeline;
3612-
attribute AnimationTriggerType type;
3626+
attribute AnimationTriggerBehavior behavior;
36133627
attribute any rangeStart;
36143628
attribute any rangeEnd;
36153629
attribute any exitRangeStart;
@@ -3624,30 +3638,24 @@ interface AnimationTrigger {
36243638

36253639
1. Create a new {{AnimationTrigger}} object, |trigger|.
36263640

3627-
1. Let |type| be the {{AnimationTriggerOptions/type}} property.
3628-
3629-
1. Let |timeline| be the {{AnimationTriggerOptions/timeline}} property.
3641+
1. Set |trigger|.[=did trigger=] to false.
36303642

3631-
1. Let |range start| be the {{AnimationTriggerOptions/rangeStart}} property.
3643+
1. Set |trigger|.[=animation trigger state|state=] to [=animation trigger state/idle=].
36323644

3633-
1. Let |range end| be the {{AnimationTriggerOptions/rangeEnd}} property.
3645+
1. Set |trigger|.{{AnimationTrigger/behavior}} to |options|.{{AnimationTriggerOptions/behavior}}.
36343646

3635-
1. Set [=default range=] of |trigger| using |range start| and |range end|,
3647+
1. Set [=default range=] of |trigger| using |options|.{{AnimationTriggerOptions/rangeStart}} and |options|.{{AnimationTriggerOptions/rangeEnd}},
36363648
following the same rules as the KeyframeAnimationOption
36373649
<a href="#dom-keyframeanimationoptions-rangestart">rangeStart</a> and
36383650
<a href="#dom-keyframeanimationoptions-rangeend">rangeEnd</a> respectively.
36393651

3640-
1. Let |exit range start| be the {{AnimationTriggerOptions/exitRangeStart}} property.
3641-
3642-
1. Let |exit range end| be the {{AnimationTriggerOptions/exitRangeEnd}} property.
3643-
3644-
1. Set [=exit range=] of |trigger| using |exit range start| and |exit range end|,
3652+
1. Set [=exit range=] of |trigger| using |options|.{{AnimationTriggerOptions/exitRangeStart}} and |options|.{{AnimationTriggerOptions/exitRangeEnd}},
36453653
following the same rules above for [=default range=], unless they are set to
36463654
"auto", in which case they are set to their corresponding side
36473655
of the [=default range=].
36483656

36493657
1. Run the procedure for [=setting timeline of animation trigger=]
3650-
on |trigger| passing |timeline| as the <var ignore>new timeline</var>.
3658+
on |trigger| passing |options|.{{AnimationTriggerOptions/timeline}} as the <var ignore>new timeline</var>.
36513659

36523660
<div dfn-type=argument class=parameters
36533661
dfn-for="AnimationTrigger/AnimationTrigger(options)">
@@ -3667,9 +3675,9 @@ interface AnimationTrigger {
36673675
Returns the [=timeline=] for this trigger
36683676
or `null` if this timeline is [=inactive timeline|inactive=].
36693677

3670-
: <dfn>type</dfn>
3678+
: <dfn>behavior</dfn>
36713679
::
3672-
Returns the [=animation trigger type|type=] of this trigger.
3680+
Returns the [=animation trigger behavior|behavior=] of this trigger.
36733681

36743682
: <dfn>rangeStart</dfn>
36753683
::
@@ -3694,7 +3702,7 @@ interface AnimationTrigger {
36943702
<pre class='idl'>
36953703
dictionary AnimationTriggerOptions {
36963704
AnimationTimeline? timeline;
3697-
AnimationTriggerType? type = "once";
3705+
AnimationTriggerBehavior? behavior = "once";
36983706
(TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart = "normal";
36993707
(TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd = "normal";
37003708
(TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) exitRangeStart = "auto";
@@ -3710,10 +3718,10 @@ dictionary AnimationTriggerOptions {
37103718
The timeline to which the trigger is associated.
37113719
If not specified, the trigger is associated with [=default document timeline=].
37123720

3713-
: <dfn>type</dfn>
3721+
: <dfn>behavior</dfn>
37143722
::
3715-
The type of trigger to create.
3716-
If not specified, the trigger is of type ''animation-trigger-type/once''.
3723+
The behavior of the trigger.
3724+
If not specified, the trigger's behavior is ''animation-trigger-type/once''.
37173725

37183726
: <dfn>rangeStart</dfn>
37193727
::
@@ -3737,30 +3745,30 @@ dictionary AnimationTriggerOptions {
37373745

37383746
</div>
37393747

3740-
<h3 id="the-animationtriggertype-enumeration">The <code>AnimationTriggerType</code> enumeration</h3>
3748+
<h3 id="the-animationtriggerbehavior-enumeration">The <code>AnimationTriggerBehavior</code> enumeration</h3>
37413749

37423750
<pre class='idl'>
3743-
enum AnimationTriggerType { "once", "repeat", "alternate", "state" };
3751+
enum AnimationTriggerBehavior { "once", "repeat", "alternate", "state" };
37443752
</pre>
37453753

37463754
<dl dfn-type=enum-value
3747-
dfn-for="AnimationTriggerType">
3755+
dfn-for="AnimationTriggerBehavior">
37483756

37493757
: <dfn>once</dfn>
37503758
::
3751-
Type ''animation-trigger-type/once''.
3759+
''animation-trigger-behavior/once''.
37523760

37533761
: <dfn>repeat</dfn>
37543762
::
3755-
Type ''animation-trigger-type/repeat''.
3763+
''animation-trigger-behavior/repeat''.
37563764

37573765
: <dfn>alternate</dfn>
37583766
::
3759-
Type ''animation-trigger-type/alternate''.
3767+
''animation-trigger-behavior/alternate''.
37603768

37613769
: <dfn>state</dfn>
37623770
::
3763-
Type ''animation-trigger-type/state''.
3771+
''animation-trigger-behavior/state''.
37643772

37653773
</dl>
37663774

0 commit comments

Comments
 (0)